<template>
	<div class="x-space" :style="styles">
		<slot></slot>
	</div>
</template>

<script lang="ts" setup>
import { computed } from 'vue';

interface Props {
	size?: number;
	direction?: 'vertical' | 'horizonal';
	align?: 'start' | 'center' | 'end';
}

const props = withDefaults(defineProps<Props>(), {
	size: 16,
	direction: 'horizonal'
});

const alignMap = {
	start: 'flex-start',
	center: 'center',
	end: 'flex-end'
};

const styles = computed(() => {
	return {
		gap: props.size + 'rpx',
		flexDirection: props.direction === 'horizonal' ? 'row' : 'column',
		alignItems: alignMap[props.align]
	};
});
</script>

<style lang="scss">
.x-space {
	display: flex;
}
</style>
